<!--
 * @Descripttion: 转租
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-11-25 14:29:36
 * @LastEditors: 赛罗
 * @LastEditTime: 2024-05-28 11:58:12
-->
<template>
  <div class="content">
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body :before-close="close">
      <el-descriptions title="租住信息" :column="2">
        <el-descriptions-item label="房源">{{
            form.premisesAddress
          }}
        </el-descriptions-item>
        <el-descriptions-item label="租住周期">
          {{ form.checkInTime | formatDate('YYYY-MM-DD') }}至{{ form.checkOutTime | formatDate('YYYY-MM-DD') }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="转租信息"></el-descriptions>
      <el-form :model="form" ref="form" label-width="100px" :rules="rules">
        <el-form-item label="转租房间" prop="houseId">
          <el-input v-model="form.premisesAddress" disabled style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="转租日期" prop="changeDate" :rules="[
          { required: true, message: '请选择转租日期', trigger: 'change' },
        ]"
        >
          <!-- <el-date-picker
            value-format="yyyy-MM-dd HH:ss:mm"
            v-model="form.realityCheckOutTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker> -->
          <el-date-picker value-format="yyyy-MM-dd HH:ss:mm" v-model="form.changeDate" type="date"
                          placeholder="选择日期" :picker-options="subletTimeOptions" :default-value="form.checkInTime"
                          @change="changeDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="转租周期" required>
          <el-row>
            <el-col :span="11">
              <el-form-item label="" prop="changeCheckInTime">
                <el-date-picker style="width: 100%;" v-model="form.order.checkInTime" value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="开始日期" disabled
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;line-height: 36px;">至</el-col>
            <el-col :span="11">
              <el-form-item label="" prop="changeCheckOutTime">
                <el-date-picker style="width: 100%;" v-model="form.order.checkOutTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="结算日期" disabled
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="承租人/企业" prop="order.reserveUser">
          <el-input v-model="form.order.reserveUser" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="order.reserveUserPhone">
          <el-input v-model="form.order.reserveUserPhone" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderInfo, sublease } from '@/api/order/order'
import { debounce } from '@/utils'
import { compareDate } from '@/utils/common/moment'

export default {
  name: 'sublet',
  components: {
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '转租',
      // form: {
      //   orderId: "1",
      //   houseId: "",
      //   realityCheckOutTime: null,
      // },
      form: {
        orderId: '', //订单id"houseId": "", //房间id
        premisesAddress: '', //小区地址
        changeDate: '', //换房日期
        checkInTime: '', //入住时间
        checkOutTime: '', //退房时间
        orderLessee: {
          createBy: '',
          createTime: '',
          updateBy: '',
          operatorId: null,
          updateTime: null,
          remark: null,
          tenantId: null, //机构id
          lesseeId: null,
          houseId: '', //房间id
          lesseeType: '', //承租人类型：1个人 2企业
          orderId: '', //订单id
          lesseeName: '', //承租人姓名
          lesseeSex: null,
          cardNumber: '', //身份证号
          enterpriseName: '', //企业名称
          phone: '', //手机号
          cardImgs: null,
          cardImgsList: null,
          lesseeState: ''
        },
        order: {
          houseId: '', //房间id
          reserveUser: '', //预订人
          reserveUserPhone: '', //预订人手机号
          checkInTime: '', //入住时间
          checkOutTime: '', //退房时间
          orderSource: '1' //订单来源：1订单管理 2嗨小克小程序
        }
      },
      subletForm: {
        subletTime: null
      },
      subletTimeOptions: {
        disabledDate: (time) => {
          // let startTime = new Date(this.form.checkInTime).getTime()
          // let endTime = new Date(this.form.checkOutTime).getTime()
          // return time.getTime() >= endTime || time.getTime() < startTime

          return compareDate(time, this.form.checkInTime,'<') || compareDate(time, this.form.checkOutTime,'>=')
        }
      },
      rules: {
        changeDate: [
          { required: true, message: '请选择转租日期', trigger: 'change' }
        ],
        order: {
          reserveUser: [
            { required: true, message: '请输入承租人/企业', trigger: 'blur' }
          ],
          reserveUserPhone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
          ]
        }

      }
    }
  },
  computed: {
    visible:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('input', val)
      }
    }
  },
  watch:{
    value:{
      handler(val){
        if(val){
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init(){
      this.getInfo()
    },
    //获取详情
    getInfo() {
      if (!this.orderId) return
      getOrderInfo(this.orderId).then((response) => {
        for (let key in response.data) {
          if (this.form.hasOwnProperty(key) && response.data[key]) {
            this.form[key] = response.data[key]
          }
        }
        this.form.changeDate = this.$moment().format('YYYY-MM-DD 00:00:00')
        this.form.order.checkInTime = this.$moment(this.form.changeDate).add(1, 'days').format('YYYY-MM-DD HH:mm:ss')
        this.form.order.checkOutTime = this.$moment(this.form.checkOutTime).format('YYYY-MM-DD HH:mm:ss')
        this.form.order.houseId = response.data.houseId
        this.form.order.orderSource = '1'
        // this.form = response.data;
      })
    },
    changeDateChange(data) {
      console.log(data)
      this.form.order.checkInTime = this.$moment(data).add(1, 'days').format('YYYY-MM-DD HH:mm:ss')
      this.form.order.checkOutTime = this.$moment(this.form.checkOutTime).format('YYYY-MM-DD HH:mm:ss')
    },
    //房间选择回调
    selectHouseCb(data) {
      let houseObj = {
        changeHouseId: data.houseId, //房屋id
        changePremisesAddress: data.premisesAddress //小区地址
      }
      this.form = { ...this.form, ...houseObj }
    },
    onSubmit: debounce(function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          sublease(this.form).then((response) => {
            this.$message.success(response.msg)
            this.$emit('success')
            this.close()
          }).catch((error) => {
            this.$message.error(error.msg)
          })
        }
      })
    }, 500),
    close() {
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="sass" scoped></style>
